<layout name="page" />
<block name="content">
	<style>
		.user_list {
			height: 400px;
			overflow-y: auto;
		}
		.user_list li.tbody {
			cursor: pointer;
		}
		.avtar {
			box-sizing: border-box;
			border: 0px solid #ccc;
			border-radius: 50%;
			width: 50px;
			height: 50px;
		}
		.ul-table span {
			line-height: 24px;
		}
		.active {
			background: #2794EB;
			color: #fff;
		}
	</style>
	{:widget('page_header/simple',array('name'=>'聊天记录查看'))}
	<div class="x-panel hidden" id="adv_search">
		<form method="post" name="form_adv_search" id="form_adv_search" >
			<div class="x-panel-header">
				<h4>高级搜索</h4>
				<div class="split"></div>
				<a  class="btn" id="submit_adv_search">搜索</a>
				<a  class="btn btn-return" id="close_adv_search">关闭</a>
			</div>
			<div class="x-panel-header-body">
				<div class="frame">
					<div class="box col-12">
						
							<label class="input-label" for="eq_dept_id">部门：</label>
							
								<select class="input" name="eq_dept_id">
									<option value="">选择部门</option>
									{$dept_list}
								</select>
							</div>
						</div>
					</div>
					<div class="box col-12">
						
							<label class="input-label" for="eq_user_id">登录人：</label>
							
								<input class="input" type="text" id="eq_user_id" name="eq_user_id">
							</div>
						</div>
					</div>
				</div>
				<div class="frame">
					<div class="box col-12">
						
							<label class="input-label" for="content">内容：</label>
							
								<input class="input" type="text" id="li_content" name="li_content">
							</div>
						</div>
					</div>
					<div class="box col-12">
						
							<div class="layui-inline">
								<label class="input-label">登录时间：</label>
								<div class="input-inline" style="width: 100px;">
									<input type="text" class="input input-start-date" name="be_create_time" readonly="readonly" />
								</div>
								<div class="layui-form-mid">
									-
								</div>
								<div class="input-inline" style="width: 100px;">
									<input type="text" class="input input-end-date" name="en_create_time" readonly="readonly" />
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</form>
	</div>
	<div class="sub-frame">
		<div class="sub-sidebar gray"  style="height:800px;overflow-y:auto;">
			<?php echo $menu ?>
		</div>
		<div class="sub-content" id="contact" >
			<div style="width:50%;float:left;padding-right:10px;box-sizing: border-box;height:400px;overflow-y:auto;">
				<div class="ul-table user_list_1">
					<ul>
						<foreach name="search" val="vo">
							<li>
								<span class="col-8 text-center"><img class="pic avtar" src="{$vo.pic}"></span>
								<span class="col-19 x1">
									<div class="frame">
										<div class="box col-12">
											<div class="">
												<span class="name">{$vo.name}</span><span class="position">{$vo.position_name}</span>
											</div>
											<div class="">
												<span class=" dept">{$vo.dept_name}</span>
											</div>
										</div>
										<div class="box col-12">
											<div>
												<span class="mobile_tel" href="tel:{$vo.mobile_tel}">{$vo.mobile_tel}</span>
											</div>
											<div>
												<span class="email ">{$vo.email}</span>
											</div>
										</div>
									</div></span>
							</li>
						</foreach>
					</ul>
				</div>
			</div>
			<div style="width:50%;float:left;padding-left:10px;box-sizing: border-box;height:400px;overflow-y:auto;">
				<div class="ul-table user_list_2">
					<ul>
						<li>
							<span class="col-8 text-center"><img class="pic avtar" src=""></span>
							<span class="col-19 x1">
								<div class="frame">
									<div class="box col-12">
										<div class="">
											<span class="name"></span><span class="position"></span>
										</div>
										<div class="">
											<span class=" dept"></span>
										</div>
									</div>
								</div></span>
						</li>
					</ul>
				</div>
			</div>
			<div style="width:100%;float:left;box-sizing: border-box;height:380px;margin-top:20px;border:1px solid #ccc;">
				<iframe src="" id="chat_list" style="width:100%;height:378px;border:0px;" ></iframe>
			</div>
		</div>
	</div>
	<div id="sample" class="hidden"  >
		<li data="{user_id}">
			<span class="col-8 text-center"><img class="pic avtar" src="{pic}"></span>
			<span class="col-19 x1">
				<div class="frame">
					<div class="box col-12">
						<div class="">
							<span class="name">{name}</span><span class="position">{position_name}</span>
						</div>
						<div class="">
							<span class="dept">{dept_name}</span>
						</div>
					</div>
				</div></span>
		</li>
	</div>
</block>
<block name="js">
	<script>
		layui.use(['global'], function() {
			var $ = layui.jquery;
			$(".sub-sidebar .tree_menu a").click(function() {
				$(".sub-sidebar .tree_menu a").each(function() {
					$(this).attr("class", "");
				});
				$(this).attr("class", "active");
				$("#chat_list").attr('src','');
				$(".user_list_2 ul li").remove();
				send_ajax("{:url('read')}", "id=" + $(this).attr("node"), function(ret) {
					show_data(ret);

					height = $("#contact").offset().top;
					console.log(height);
					$('html,body').animate({
						scrollTop : height + 'px'
					}, 600);
					//document.getElementById("contact").scrollIntoView(false);
				});
				return false;
			});

			$(document).on('click', '.user_list_1 li', function() {
				$('.user_list_1 li.active').removeClass('active');
				$(this).addClass('active');
				id = $('.user_list_1 li.active').attr('data');
				$("#chat_list").attr('src','');				
				send_ajax("{:url('user_list')}", "id=" + id, function(ret) {
					show_data2(ret);
				});
			});

			$(document).on('click', '.user_list_2 li', function() {
				$('.user_list_2 li.active').removeClass('active');
				$(this).addClass('active');
				from = $('.user_list_1 li.active').attr('data');
				to = $('.user_list_2 li.active').attr('data');

				url = "{:url('chat_list')}";
				$("#chat_list").attr('src', url + "&from=" + from + '&to=' + to);
			});

			function show_data(ret) {
				$(".user_list_1 ul li").remove();
				for (var s in ret.data) {
					html = $("#sample").html();
					html = tpl_parse(html, 'user_id', ret.data[s].id);
					html = tpl_parse(html, 'pic', ret.data[s].pic);
					html = tpl_parse(html, 'emp_no', ret.data[s].emp_no);
					html = tpl_parse(html, 'name', ret.data[s].name);
					html = tpl_parse(html, 'position_name', ret.data[s].position_name);
					html = tpl_parse(html, 'dept_name', ret.data[s].dept_name);

					$(".user_list_1 ul").append(html);
					$("#sample li span a").text("");
				}
			}

			function show_data2(ret) {
				$(".user_list_2 ul li").remove();
				for (var s in ret.data) {
					html = $("#sample").html();
					html = tpl_parse(html, 'user_id', ret.data[s].id);
					html = tpl_parse(html, 'pic', ret.data[s].pic);
					html = tpl_parse(html, 'emp_no', ret.data[s].emp_no);
					html = tpl_parse(html, 'name', ret.data[s].name);
					html = tpl_parse(html, 'position_name', ret.data[s].position_name);
					html = tpl_parse(html, 'dept_name', ret.data[s].dept_name);

					$(".user_list_2 ul").append(html);
					$("#sample li span a").text("");
				}
			}

		});
	</script>
</block>